<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>鹿的轮播</title>
	<style type="text/css">
	.picture{
		margin-top: 40px;
		text-align: center;
		
	}
	.left{	
		margin-right: 20px; 
		padding-bottom: 123px;	
	}
	.right{	
		margin-left: 20px;
		padding-bottom: 123px; 	
	}
	#imgs{
		border-radius:9px; 
	}
	</style>
</head>
<body>

<div class="picture" onmouseover="mOver()" onmouseout="mOut()">
<img src="images/left.png" onclick="go()" class="left">
<img src="images/九色鹿.jpg" width="400" height="300" id=imgs >
<img src="images/right.png" onclick="back()" class="right"></div>
<script type="text/javascript">
 var str=["images/九色鹿.jpg","images/晶格1.jpg","images/墨.jpg","images/小鹿男.jpg","images/角.jpg"]
 var index=0;
 var time=setInterval(go,1000);
 function go(){
 		var imgs=document.getElementById('imgs');

				if (index==str.length-1) {
					index=-1;
				}
				imgs.src=str[++index];

 }
 function  back(){
 			var imgs=document.getElementById('imgs');
				if (index==0) {
					index=str.length-1;
				}
				imgs.src=str[--index];

 }

function mOver(){

   clearInterval(time);
}
function mOut(){
    time=setInterval(go,1000);
}



 
</script>
</body>
</html>>